<template>

	<view>
		<view class="footer_input_box footer_box_fixed">

			<!-- 图片 -->
			<view v-show="fileList.length >0">
				<u-scroll-list style="margin-bottom: -12px;">
					<c-upload style="padding-top: 3px;" ref="uploadFile2" :file-type="uploadFleType" v-model="fileList"
						:autoUpload="false" :imageFormData="{compress: true}" :videoFromData="{compress: true}" :add="false"
						@videoPlay="videoPlay"	>
						<template #delete>
							<view class="delete">
								<image class="upload_del" src="/static/icon/article/input_colse.png"></image>
							</view>
						</template>
					</c-upload>
				</u-scroll-list>
			</view>

			<!-- 文本输入 -->
			<view class="footer_input_content">

				<view class="input_textarea">
					<u--textarea v-model="content" :height="textLineHeght" maxlength="1000" :placeholder="repostedUser?repostedUser:'你想说点什么...'"
						confirmType="done" @linechange="linechange">
					</u--textarea>
				</view>

				<view class="input_none">

					<!-- 放大和发送 -->
					<view class="send_btn" v-if="haveInputDate">
						<image v-if="textLineHeght >= 80" class="btn_icon" src="/static/icon/icon_amplify.png"
							@click="opnePopup()"></image>
						<u-button type="primary" :plain="true" text="发送" :disabled="!haveInputDate || submiting" @click="submitForm"></u-button>
					</view>

					<!-- 未输入内容时展示的操作按钮 -->
					<view class="input_none_right" v-if="!haveInputDate">
						<image  @click="openUpload('image',2)" class="input_img" src="/static/icon/article/input_img.png"></image>
						<image @click="openUpload('video',2)" class="input_img" src="/static/icon/article/input_video.png"></image>
						<!-- <image class="input_img" src="/static/icon/article/input_share.png" @click="confirmShare"></image> -->
					</view>
				</view>
			</view>

			<!-- 输入内容时展示的操作按钮 -->
			<view class="input_morm_bottom" v-if="haveInputDate">
				<image  @click="openUpload('image',2)" class="input_img" src="/static/icon/article/input_img.png"></image>
				<image @click="openUpload('video',2)" class="input_img" src="/static/icon/article/input_video.png"></image>
				<!-- <image class="input_img" src="/static/icon/article/input_share.png" @click="confirmShare"></image> -->
			</view>
		</view>



		<!-- 弹出层 -->
		<u-popup :show="showPopup" @close="popupClose" :overlay="false" zIndex="999" safeAreaInsetTop>
			<view style="height: 100vh;padding: 20px;">

				<view style="width: 100%;height: 20px;margin-top: 30px;">
					<u-icon name="close" size="24" style="float: right;" @click="showPopup = false"></u-icon>
				</view>

				<view v-show="fileList.length >0">
					<u-scroll-list style="margin-top: 20px;">

						<c-upload style="padding-top: 3px;" ref="uploadFile1"  v-model="fileList" :file-type="uploadFleType"
							:autoUpload="false" :imageFormData="{compress: true}" :videoFromData="{compress: true}" :add="false"
							@videoPlay="videoPlay"	>
							<template #delete>
								<view class="delete">
									<image class="upload_del" src="/static/icon/article/input_colse.png"></image>
								</view>
							</template>
						</c-upload>
					</u-scroll-list>
				</view>

				<u--textarea style="margin-top: 20px;" v-model="content" height="400" maxlength="1000" :focus="focusTag" @blur="inputBlur()"
					confirmType="done" :placeholder="repostedUser?repostedUser:'你想说点什么...'">
				</u--textarea>


				<view class="footer_input_content footer_box_fixed">


					<view class="input_none" style="flex: 1;justify-content: flex-end;">

						<!-- 缩小和发送 -->
						<view class="send_btn_more">
							<image class="btn_icon_more" src="/static/icon/icon_amplify.png" @click="showPopup = false">
							</image>
							<view style="width: 45px;">
								<u-button type="primary" :plain="true" text="发送" :disabled="!haveInputDate || submiting" @click="submitForm"></u-button>
							</view>
						</view>


						<!-- 图片上传按钮等 -->
						<view class="input_morm_bottom">
							<image @click="openUpload('image',1)" class="input_img" src="/static/icon/article/input_img.png">
							</image>
							<image @click="openUpload('video',1)" class="input_img" src="/static/icon/article/input_video.png">
							</image>
							<!-- <image class="input_img" src="/static/icon/article/input_share.png" @click="confirmShare">
							</image> -->
						</view>
					</view>
				</view>

			</view>
		</u-popup>


		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import CUpload from "@/components/file/cupload.vue"
	export default {
		props: {
			// 文章id
			articleId: {
				type: String,
				default () {
					return ''
				}
			},
			// 根评论id
			rootId: {
				type: String,
				default () {
					return ''
				}
			},
		},
		components: {
			CUpload
		},
		data() {
			return {
				// 自动获取焦点
				focusTag: false,
				// 表单
				dataForm:{
					// 一级评论和二级评论是0
					dialog: 0,
					// 根评论id
					rootId: '',
					// 父评论id
					parentId: '',
					// 被回复用户id
					repostedUserId: '',
					objectId: '',
					content: '',
					fileList: []
				},
				// 被回复用户名称
				repostedUser: '',
				// 要上传文件类型
				uploadFleType: 'image',
				// 文件
				fileList: [],
				content: '',
				// 是否展示弹出层
				showPopup: false,
				// 文本域高度
				textLineHeght: 20,
				// 提交中
				submiting: false,
			}
		},

		created() {

		},
		computed: {
			haveInputDate() {
				return this.fileList.length > 0 || this.content.length > 0
			}
		},
		methods: {
			// 组件失焦
			componentBulr(){
				if(this.repostedUser){
					this.clearReply()
				}
			},
			hasLogin() {
				return this.$authUtil.isLoginedin()
			},
			clearReply(){
				 this.dataForm = {
					dialog: 0,
					rootId: '',
					parentId: '',
					repostedUserId: '',
					objectId: '',
					content: '',
					fileList: []
				}
				this.repostedUser = ''
				this.uploadFleType = 'image',
				this.fileList = [],
				this.content = '',
				this.showPopup = false,
				this.submiting = false
			},
			// 输入框失焦
			inputBlur(){
				this.$nextTick(()=>{
					this.focusTag = false
				})
				if(!this.dataForm.content && this.fileList.length < 0){
					this.clearReply()
				}
			},
			// 回复用户
			replyUser(val,isSon){
				this.clearReply()
				this.dataForm.repostedUserId = val.poster.username
				this.dataForm.parentId = isSon?val.parentId:val.id
				this.repostedUser = '回复 '+ val.poster.displayName + "："
				this.focusTag = true
			},
			// 展开时的文件上传
			openUpload(type,ref) {
				if(this.submiting){
					return
				}
				this.uploadFleType = type
				this.$nextTick(() => {
					if (ref === 1){
						this.$refs.uploadFile1.onClickAdd()
					}else{
						this.$refs.uploadFile2.onClickAdd()
					}
				})
			},
			// 上传文件
			async doUploadFile(){
				if(this.showPopup){
					await this.$refs.uploadFile1.submit().then(reslut=>{})
				}else{
					await this.$refs.uploadFile2.submit().then(reslut=>{})
				}
			},
			// 提交评论
			async submitForm(){
				if(this.submiting || !this.hasLogin()){
					return
				}
				if(!this.content && this.fileList.length  < 1){
					this.$refs.uToast.show({
						type: 'error',
						message: "请输入评论内容"
					})
					return
				}

				if(this.fileList.length >0){
					await this.doUploadFile()
				}
				this.dataForm.objectId = this.articleId,
				this.dataForm.content = this.content,
				this.dataForm.fileList = this.getFileList()
				if(this.rootId){
					this.dataForm.rootId = this.rootId
				}else{
					this.dataForm.rootId = (this.dataForm.parentId !='0' && this.dataForm.parentId)?this.dataForm.parentId:'0'
				}
				this.dataForm.parentId = this.dataForm.parentId||this.rootId

				this.submiting = true
				uni.showLoading({
					title: '正在发布评论...',
					icon: 'loading',
				})
				this.$httpApi.baseCommentPost('user/reply/article',this.dataForm).then(({ data }) => {
					if (data.code == "000000") {
						this.$emit('replySuccess')
						uni.hideLoading()
						this.$refs.uToast.show({type: 'success',icon: false,message: '评论发布成功'})
						this.clearReply()
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
						uni.hideLoading()
					}
					this.submiting = false
				}).catch(err => {
					this.submiting = false
					uni.hideLoading()
				})
			},
			// 获取文件列表
			getFileList(){
				return this.fileList.map(item=>{return item.fileId})
			},
			// 输入框聚焦
			inputFocus() {
				console.log('inputFocus');
			},
			// 打开弹出层
			opnePopup() {
				this.uploadRef = '2'
				this.showPopup = true
				this.$emit('popupOpen', true)
			},
			// 弹出层关闭事件
			popupClose() {
				this.uploadRef = '1'
				this.showPopup = false,
				this.$emit('popupOpen', false)
			},
			// 文本域高度变化
			linechange(e) {
				let lineCount = e.detail.lineCount
				if (lineCount === 0) {
					this.textLineHeght = 20
				} else if (lineCount > 0 && lineCount <= 4) {
					this.textLineHeght = lineCount * 20
				} else {
					this.textLineHeght = 80
				}
			},
			/**
			 * 预览视频
			 * @param {string, object} item 文件信息
			 * */
			videoPlay(files) {
				this.$emit('video_play',files.item.url)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.footer_input_box {
		// z-index: 998;
		border-top-color: #F5F5F5;
		border-top-width: 1px;
		background-color: #FFFFFF;
		flex-direction: column;
		flex: 1;
		display: flex;
	}

	.footer_input_content {
		flex: 1;
		display: flex;
		flex-direction: row;

	}

	.input_textarea {
		display: flex;
		flex: 1;
		padding: 4px 10px;
		justify-content: center;
		align-items: center;
	}

	.footer_box_fixed {
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}

	.send_btn {
		display: flex;
		flex-direction: column;
		padding: 5px 0;
		justify-content: center;
		align-items: center;
	}

	.send_btn_more {
		display: flex;
		flex-direction: row;
		padding: 5px 10px;
		justify-content: flex-end;
	}

	.btn_icon {
		width: 20px;
		height: 20px;
		border-radius: 20px;
		border: #787878 solid 2px;
		margin-bottom: 8px;
	}

	.btn_icon_more {
		width: 20px;
		height: 20px;
		margin: 5px 10px;
		border-radius: 20px;
		border: #787878 solid 2px;
	}

	.btn {
		font-size: 15px;
		color: #01B4FE;
	}


	.input_none {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		margin: 6px 10px;
	}

	.input_none_right {
		flex-direction: row;
	}

	.input_img {
		width: 25px;
		height: 25px;
		padding: 5px 10px;
	}

	.input_morm_bottom {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		padding: 3px 10px;
		border-top: #f1f1f1 solid 1px;
	}


	::v-deep .u-textarea {
		background-color: #f1f1f1 !important;
		border-radius: 15px;
		padding: 5px 9px;
	}


	::v-deep .file-list {
		display: flex !important;
		flex-direction: row;
		margin-top: 4px;
	}

	::v-deep .u-button--primary {
		border: none !important;
	}

	.upload_del {
		z-index: 9;
		position: absolute;
		top: -10rpx;
		left: 135rpx;
		width: 32rpx;
		height: 32rpx;
	}
</style>
